<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>列表过滤渲染</title>
		<script src="./js/vue.js"></script>
	</head>
	<body>
		<!--
		v-for指令
		1.用于展示列表数据
		2.语法:v-for="(item,index) in xxx" :key="yyy"
		3.可遍历:数组、对象、字符串、指定次数
		准备好一个容器
		-->
		<div id="root">
			<!-- 遍历数组 -->
			<h2>人员列表</h2>
			<input type="text" v-model="keyWord" />
			<button @click="sortType = 2">年龄升序</button>
			<button @click="sortType = 1">年龄降序</button>
			<button @click="sortType = 0">原顺序</button>
			<ul>
				<li v-for="(p,index) of filterPerson" :key="p.id">
				{{p.name}}-{{p.age}}-{{p.sex}}
				</li>
			</ul>
		</div>
		<script>
			Vue.config.productionTip = false;
			const vm = new Vue({
				el:'#root',
				data:{
					keyWord:'',
					sortType:0,// 0-原顺序 1-降序 2-升序
					persons:[
						{id:'001','name':'马冬梅',age:29,sex:'女'},
						{id:'002','name':'周冬雨',age:26,sex:'女'},
						{id:'003','name':'周杰伦',age:31,sex:'男'},
						{id:'004','name':'温兆伦',age:22,sex:'男'}
					]
				},
				computed:{
					filterPerson(){
						console.log('dddddd')
						const arr = this.persons.filter((item) => {
							return item.name.indexOf(this.keyWord) !== -1
						});
						if(this.sortType) {
							console.log(this.sortType)
							arr.sort((p1,p2) => {
								console.log('xsdsd');
								return this.sortType === 1 ? p2.age - p1.age : p1.age - p2.age
							})
						}
						return arr
					}
				}
			});
		</script>
	</body>
</html>